<template>
  <div class="h-full">
    <ul class="homeList">
      <li v-for="(item,index) in router.analysis" :key="index">
        <div :class="'homeList-item homeList-item-' + index">
          <svg-icon :icon-class="item.icon"/>
          <div class="homeList-title">{{ item.title }}</div>
          <ul>
            <li v-for="(it,i) in item.list" :key="i" class="homeList-it">
              <router-link class="inlineBlock" :class="{click:it.click}" :to="'/analysis/analysis-index/' + it.url">
                {{ it.title }}
              </router-link>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'Index',
    data() {
      return {
        router: this.$store.getters.router
      }
    },
    methods: {}
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

  ul {
    padding: 0;
    line-height: 2;
  }

  .homeList {
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    & > li {
      width: 25%;
      padding: 10px 10px;
      margin-top: 1.5rem;
      a {
        padding: 5px 10px;
        border-radius: 4px;
      }
      a:hover {
        background: rgba(0, 0, 0, .2);
      }
      .homeList-item {
        padding: 15px 0 0 45px;
        height: 230px;
        border-radius: 2px;
        background: rgba(0, 0, 0, .45);
        position: relative;
        transition: box-shadow .2s;
        &:hover {
          box-shadow: 0 0 8rem inset rgba(0, 0, 0, .25);
          svg {
            top: 26px;
            left: 11px;
            font-size: 26px;
          }
        }
        &:before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: -1;
          filter: blur(9px);
        }

        &-6:before {
          background: url("./images/bg-7.jpg") no-repeat center;
          background-size: cover;
        }
        &-5:before {
          background: url("./images/bg-1.png") no-repeat center;
          background-size: cover;
        }
        &-4:before {
          background: url("./images/bg-2.jpg") no-repeat center;
          background-size: cover;
        }
        &-3:before {
          background: url("./images/bg-3.jpg") no-repeat center;
          background-size: cover;
        }
        &-2:before {
          background: url("./images/bg-8.jpg") no-repeat center;
          background-size: cover;
        }
        &-1:before {
          background: url("./images/bg-5.jpg") no-repeat center;
          background-size: cover;
        }
        &-0:before {
          background: url("./images/bg-4.jpg") no-repeat center;
          background-size: cover;
        }
      }
    }
  }

  svg {
    position: absolute;
    left: 13px;
    top: 28px;
    font-size: 22px;
    margin-right: .6rem;
    transition: all .1s;
  }

  .homeList-title {
    padding-left: 8px;
    margin-bottom: 5px;
    font-size: 24px;
    color: #f1f1f1;
  }

  .homeList-it {

  }

  .inlineBlock {
    color: #999;
    &.click {
      color: #fff;
    }
  }
</style>
